<template>
	<div class="pb-9 bg-bg-3 rounded relative text-t-1 flex flex-col">
		<sports-match-info
			:data="data"
			class="cursor-pointer"
			@click="onClick(SportsDetailTab.Market)" />
		<div class="flex-1 -mb-3"></div>
		<div class="px-2">
			<sports-match-item
				v-for="item in marketList"
				:key="item.marketId"
				:market="item"
				:match="data" />
		</div>
		<div class="w-full h-9 flex items-center absolute bottom-0 text-sm text-t-2 app-font-bold">
			<div
				class="basis-1/2 flex justify-center items-center app-text-react"
				@click="onClick(SportsDetailTab.Market)">
				{{ t('betting.more') }}
				<base-icon name="go"></base-icon>
			</div>
			<div
				class="basis-1/2 flex justify-center items-center app-text-react"
				@click="onClick(SportsDetailTab.Acivity)">
				{{ t('betting.trend') }}
				<base-icon name="go"></base-icon>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { Match, SportsDetailTab } from '@/types'
import SportsMatchInfo from './sports-match-info.vue'
import SportsMatchItem from './sports-match-item.vue'
import { BaseIcon } from '@/components/base'
import { t } from '@/utils'
import { useSportsStore, useMarketStore } from '@/store'

const props = defineProps({
	data: {
		type: Object as PropType<Match>,
		required: true
	}
})

const sportsStore = useSportsStore()
const marketStore = useMarketStore()

const marketList = computed(() => {
	const filters = marketStore.filters
	const markets = marketStore.mainMarkets(props.data.sportId, props.data.isLive)
	const marketTypes: string[] = []
	const marketTypeIds: string[] = []
	markets.forEach((item) => {
		marketTypes.push(item.marketTypeCate)
		marketTypeIds.push(item.marketTypeId)
	})
	const arr = filters[props.data.sportId]
	return props.data.markets
		.filter(
			({ marketTypeId, marketTypeCate }) =>
				marketTypeIds.includes(marketTypeId) &&
				marketTypeCate &&
				(!arr || !arr.includes(marketTypeCate))
		)
		.sort((a, b) => marketTypes.indexOf(a.marketTypeCate) - marketTypes.indexOf(b.marketTypeCate))
})

const onClick = (tab: SportsDetailTab) => {
	sportsStore.setDetail({
		show: true,
		eventId: props.data.eventId,
		tab
	})
}
</script>
